<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>学习</title>
    <style>
        *{
            margin: 0;
            border:0px;
            padding: 0;
        }
        html{font-size:16px;width: 100%;height: 100%;}
        body{
            padding:1rem;
            height: calc(100% - 2rem);
            background-color:#ededed;
        }
        .top{
            font-size:1.3rem;
            line-height:1rem;
            height:4.5rem;
            background-color:#ededed;
        }
        .chat{
            width: 100%;
            height:calc(100% - 5rem);
            float: left;
        }

        #content{
            color:#1a1a1a;
            word-wrap: break-word;word-break: break-all;overflow: hidden;
            height: calc(100% - 5.5rem);
            overflow-y:auto;
        }

        .sText{
            border:1px solid black;
            width: 65%;
            height: 2.5rem;
            border-radius: 10px;
            font-size: 15px;
        }

        .btn{
            width: 30%;
            height: 2.5rem;
            float:right;
            border-radius: 10px;
            text-align: center;
            font-size: 18px;
            color: white;
            background-color: limegreen;
        }
        .infobtnss{
            height: 2.5rem;
        }
        .btn1,.btn2{
            float:right;
            width: 3rem;
            height: 1.5rem;
            line-height:1.5rem;
            border-radius: 0.1rem;
            text-align: center;
            font-size: 1.2rem;
            color: white;
            background-color: limegreen;
            margin:0.5rem;

        }
        .btn2{background-color: red}
        #infobtns{display:none;}
        .send{
            clear:both;

        }
        .option{
            border-radius: 5px;

            line-height:1.3rem;
            background-color: #fff;
            padding:0.2rem 0.5rem;
            margin-bottom:1rem;
        }
        .info{
            float:right;
            width:65%;
            font-size:0.8rem;
            line-height:0.8rem;
        }
        .color2{
            background-color: #33CCFF;
        }
        .color1{
            background-color: #00CCFF;
        }
        .color3{
            color: #4169E1;
        }
        .color4{
            color: #32CD32;
        }
        .color5{
            color: #fff;
        }

    </style>

</head>
<body>
<div class="chat">
    <div class="top">
        <span class="">学习</span>
        <p class='info' id="info1"></p>
        <p class='info' id="info2"></p>
        <p class='info' id="info3"></p>
    </div>
    <div id="content">

    </div>
</div>

<div class="send">
    <p class='infobtnss'>
			<span id="infobtns">
				<input type="button" id="infobtn1" class="btn1" value="正确"/>
				<input type="button" id="infobtn2" class="btn2" value="错误"/>
				<input type="button" id="infobtn3" class="btn2" value="清除"/>
			</span>
    </p>
    <textarea type="text" id="leftText" class="sText"/></textarea>
    <i id="leftSendBtn"><input type="button" class="btn" value="发送"/></i>
</div>

<script>
    var km = request("km");
    var rclear = request("r");
    var data = [];
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            data = JSON.parse(xmlHttp.responseText);
        }
    }
    xmlHttp.open("GET", km+".json?t="+(new Date().getTime()),false);
    xmlHttp.send();
    var index;
    if (!get("info1") || rclear){//存题的对错次数
        var info1 = [];
        for(var i in data){
            info1.push([i,0,0]);//id 对 错
        }
        set('info1',info1);
    }
    if(!get('info2') || rclear){
        set('info2',[0,0]);
    }
    if(!get('re') || rclear){//重做
        set('re',{});
    }


    function get(id){
        return JSON.parse(localStorage.getItem(km+id));
    }
    function set(id,json){
        localStorage.setItem(km+id,JSON.stringify(json))
    }

    window.onload = function(){
        var lsBtn = document.getElementById("leftSendBtn");
        lsBtn.addEventListener("click", lsend);
        var lsBtn = document.getElementById("infobtn1");
        lsBtn.addEventListener("click", yes);
        var lsBtn = document.getElementById("infobtn2");
        lsBtn.addEventListener("click", no);
        var lsBtn = document.getElementById("infobtn3");
        lsBtn.addEventListener("click", clear);
        next(get("oldIndex"));
    }
    function clear(){
        document.getElementById("leftText").focus()
        set('info2',[0,0])
        info();
    }
    function yes(){
        document.getElementById("leftText").focus()
        var info2 = get('info2');
        info2[0]=info2[0]+1;
        info2[1]=info2[1]+1;
        set('info2',info2)
        var info1 = get('info1');
        info1[index]=[info1[index][0],info1[index][1]+1,info1[index][2]];
        set('info1',info1);
        document.getElementById("infobtns").style.display='none';
        next();

    }
    function no(){
        document.getElementById("leftText").focus()
        var info2 = get('info2');
        info2[0]=info2[0]+1;
        set('info2',info2)
        var info1 = get('info1');
        info1[index]=[info1[index][0],info1[index][1],info1[index][2]+1];
        set('info1',info1);
        document.getElementById("infobtns").style.display='none';
        next();

    }
    function info(){
        var info1 = get('info1');
        var info2= get('info2');
        var re = get("re");
        document.getElementById("info1").innerHTML='已做过'+(info1[index][1]+info1[index][2])+'次,正确率:'+(info1[index][1]==0?0:info1[index][1]*100/(info1[index][1]+info1[index][2])).toFixed(2)+'%';
        document.getElementById("info2").innerHTML='总计:'+data.length+'题, 共做'+info2[0]+'次,正确率:'+(info2[0]==0?0:info2[1]*100/info2[0]).toFixed(2)+'%';
        var yes = info1.filter(v=>{//错的多
            return v[2]>v[1];
        });
        var wz = info1.filter(v=>{//未做
            return v[2]+v[1] == 0;
        });
        var zwc = info1.filter(v=>{//做未错
            return v[2]==0 && v[1]>0;
        });
        document.getElementById("info3").innerHTML='错的多:'+yes.length+'题,待复习:'+Object.keys(re).length+'题' +
            '</br> 未做:'+wz.length+'题,直接作对:'+zwc.length+'题';
    }

    function next(oldIndex){
        document.getElementById("content").innerHTML='';
        if(oldIndex){
            index = oldIndex;
        }else{
            var re = get("re");
            if (Object.keys(re).length>0){//重做
                index = random(re);
                delete re[index];
                set("re",re);
            }else{
                var info1 = get("info1");
                var yes = info1.filter(v=>{//错的多
                    return v[2]>v[1];
                });
                if(yes.length>9){//错20道
                    for (var i in info1){
                        if (info1[i][2]>0&&info1[i][1]<2*info1[i][2]) { //做错了 且 作对次数小于做错2倍
                            re[info1[i][0]]=1;
                        }
                    }
                    set("re",re);
                    next();
                    return;
                }
                var wz = info1.filter(v=>{//获取未做过的
                    return v[1]+v[2] ==0;
                });
                if (wz.length == 0){
                    var ls = info1.sort(function (a,b) {
                        if ((b[2]-b[1])==(a[2]-a[1])){//错减对一样
                            return (a[2]+a[1])-(b[2]+b[1]);//做的多
                        }else{
                            return (b[2]-b[1])-(a[2]-a[1]);
                        }
                    });
                    index = ls[0][0];//错的最多的
                }else{
                    index = wz[Math.floor(Math.random() * (wz.length))][0];
                }
            }
        }
        set('oldIndex',index);
        add('<span class="color3">问题:</span> '+data[index][0]);
        document.getElementById("leftSendBtn").style.display='inline';
        info();

    }
    //随机选一个
    function random(data) {
        var index= Math.floor(Math.random() * (Object.keys(data).length));
        for(var key in data){
            if (index--==0){
                index = key;
                break;
            }
        }
        return index;
    }
    function add(text,t){
        if(text.trim() != ""){
            var leftContent = document.getElementById("content");
            var option = document.createElement("p");
            var len = text.replace(/[^\u0000-\u00ff]/g,"aa").length/2-14;
            var max =  document.body.clientWidth-50;
            if(t){
                option.className +='color2 ';

                if(len * 16<max){
                    option.style.marginLeft = max - (len * 16) +"px";
                }else{
                    option.style.marginLeft = 50 +"px";
                    max = max -50;
                }

            }
            if(len * 16<max){
                max = len * 16;
            }

            option.style.width = max + "px";
            option.className +='option';

            option.innerHTML = text;
            leftContent.appendChild(option);
            document.getElementById("leftText").value = '';
        }
    }
    function lsend(){
        document.getElementById("leftText").focus()
        document.getElementById("leftSendBtn").style.display='none';
        document.getElementById("infobtns").style.display='block';
        document.getElementById("content").innerHTML='';
        var text = document.getElementById("leftText").value;
        add('<span class="color3">问题:</span> '+data[index][0]);
        add('<span class="color5">答案:</span> '+text,1);
        add('<span class="color4">答案:</span> '+data[index][1]);
        //next();
    }

    function request(variable){
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
</script>
</body>
</html>